/* components */
import { SettingGPTViewHeader, SettingGPTViewContent, SettingGPTPromptWord } from '@gpt/components';
import { Tabs } from '@src/modules/setting/gpt/views/biview/components';
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum';
/* hooks */
import { useGetFetchUserData, useSaveGptRobotApp } from '@src/modules/setting/gpt/views/biview/hooks';
/* vue */
import { defineComponent } from 'vue';
/* scss */
import '@src/modules/setting/gpt/views/biview/index.scss';
/* types */
import { SettingGPTPromptWordItem, SettingGPTRobotAppConfigType } from '@gpt/types';
/* model */
import MsgModel from '@model/MsgModel';
import { SettingGPTPromptWord as SettingGPTPromptWordModel } from '@gpt/model';
/* util */
import { isEmpty, isFalsy } from '@src/util/type';

type SettingGPTPromptWordComponent = InstanceType<typeof SettingGPTPromptWord>;

export default defineComponent({
  name: ComponentNameEnum.SettingGPTHomeViewBi,
  props: {},
  setup(props, { emit }) {
    
    const { 
      gptRobotApp,
      loading: fetchGptRobotAppLoading,
    } = useGetFetchUserData();
    const { 
      saveFetchApp,
      loading: saveFetchAppLoading,
    } = useSaveGptRobotApp();
    
    return {
      gptRobotApp,
      saveFetchApp,
      fetchGptRobotAppLoading,
      saveFetchAppLoading,
    };
  },
  data() {
    return {
      // tabs 列表
      tabList: [
        {
          id: 1,
          label: '提示词',
          name: 'prompt',
        },
      ],
      activeName: 'prompt', // 当前活动tab的name
    };
  },
  computed: {
    loading(): boolean {
      return (
        this.fetchGptRobotAppLoading 
        || this.saveFetchAppLoading
      )
    },
    title(): string {
      return '小宝BI';
    },
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading,
          },
        ],
      };
    },
    robotAppSetting(): SettingGPTRobotAppConfigType {
      return this.gptRobotApp.setting;
    },
    promptWordList(): SettingGPTPromptWordItem[] {
      return this.robotAppSetting.promptWordList || [];
    },
  },
  methods: {
    changeTab(tabName: string) {
      this.activeName = tabName;
    },
    async savePromptWordHandler() {
      
      const settingGPTPromptWordComponent = this.$refs.SettingGPTPromptWord as SettingGPTPromptWordComponent
      const isValid = await settingGPTPromptWordComponent.validate()
      if (isFalsy(isValid)) {
        return
      }
      
      this.saveFetchApp(this.promptWordList).then(data => {
        if (MsgModel.isSuccess(data)) {
          this.$message.success('保存成功');
        }
      });
      
    },
    onChangePromptWordHandler(value: SettingGPTPromptWordItem[]) {
      this.gptRobotApp.setting.promptWordList = value;
    },
    onAddPromptWordHandler() {
      const promptWordList = [
        ...this.promptWordList,
        new SettingGPTPromptWordModel()
      ];
      this.onChangePromptWordHandler(promptWordList);
    },
    renderTabContent() {
      return (
        <Tabs 
          tabList={this.tabList} 
          currentTab={this.activeName} 
          onInput={this.changeTab}
        >
          <div slot="prompt">
            <SettingGPTPromptWord 
              ref="SettingGPTPromptWord" 
              appName="小宝BI" 
              value={this.promptWordList} 
              onChange={this.onChangePromptWordHandler} 
              onAdd={this.onAddPromptWordHandler}
            >
            </SettingGPTPromptWord>
          </div>
        </Tabs>
      );
    },
    renderSaveButton() {
      return (
        <el-button 
          class="setting-gpt-bi-view__save-button"
          type="primary" 
          size="medium" 
          onClick={this.savePromptWordHandler}
        >
          保存
        </el-button>
      )
    },
    renderFooter() {
      return (
        <div class="setting-gpt-bi-view__footer">
          <el-button type="primary" size="medium" onClick={this.savePromptWordHandler}>
            保存
          </el-button>
        </div>
      );
    },
  },
  render() {
    return (
      <div 
        class={ComponentNameEnum.SettingGPTHomeViewBi} 
        {...this.attrs}
      >
        <SettingGPTViewHeader 
          title={this.title}
        >
        </SettingGPTViewHeader>
        <SettingGPTViewContent>
          {this.renderTabContent()}
          {this.renderSaveButton()}
        </SettingGPTViewContent>
      </div>
    );
  },
});
